@extends('layouts.index')
@section('title',trans('web.writing_detail'))
    @section('content')
        <link href="{{asset('js/video/css/video-js.css')}}" rel="stylesheet">
        <div class="main-container">
            <div>
                <article class="case-single span14 margin-bottom-contextual">
                    <!-- react-empty: 413 -->
                    <div class="page__transition">
                        <div class="case-single__details span5 span14-tablet span14-mobile">
                            <div class="case-single__details__top">
                                <!--分享部分-->

                                <!--时间部分-->
                                <div class="case-single__details__top__date span2 span4-tablet span4-tablet-plus span14-mobile pixel-pattern">
                                    <div class="pixel-text case-single__details__day">

                                        <span class="pixel-text__text"> {{\Illuminate\Support\Carbon::parse($detail->created_at)->day}}</span></div>
                                    <span class="case-single__details__month"><!-- react-text: 441 -->{{trans('datetime.'.\Illuminate\Support\Carbon::parse($detail->created_at)->month)}}<!-- /react-text --><!-- react-text: 442 --> <!-- /react-text -->{{\Illuminate\Support\Carbon::parse($detail->created_at)->year}}<!-- react-text: 443 --><!-- /react-text --></span>
                                    <span class="case-single__details__award"></span>
                                </div>
                            </div>
                            <!--大屏时显示作品题目-->
                            <div class="case-single__details__bottom hide-tablet hide-mobile">
                                <div class="case-single__details__content">
                                    <span class="case-single__details__type">@lang('web.writing'.$detail->category_id)</span>
                                    <h1 class="case-single__details__title"></h1>{{$detail->name}}
                                    <h2 class="case-single__details__title"></h2>{{$detail->user->name or ''}}
                                </div>

                            </div>
                        </div>
                        <!--轮播图部分-->
                        <div class="span14-tablet span12-mobile case-single__slider-holder span9">
                            <div class="slider" data-slide="2">
                                <div class="bd slider">
                                    <ul class="slider-list">
                                        @foreach($detail->master as $v)
                                            @if($v)
                                        <li class="slider-slide">
                                            <a href="{{asset($v)}}" target="_blank">
                                                <img src="{{imagecache('imagecache',['template'=>'large','filename'=>$v])}}" alt="" class=""></a>
                                        </li>
                                            @endif
                                @endforeach
                                    </ul>
                                </div>
                                <div class="picFocus hd">
                                    <ul>
                                        @foreach($detail->master as $v)
                                            @if($v)
                                        <li><img src="{{imagecache('imagecache',['template'=>'large','filename'=>$v])}}" alt="" class=""></li>
                                            @endif
                                            @endforeach
                                    </ul>
                                </div>
                                <!-- 下面是前/后按钮代码，如果不需要删除即可 -->
                                <a class="prev" href="javascript:void(0)"></a>
                                <a class="next" href="javascript:void(0)"></a>
                            </div>
                            <div class="">
                                <div class="youtube-overlay"></div>
                            </div>
                        </div>
                        <!--需要时修改-->
                        <div class="case-single__meta-scorecard span5 span8-tablet pixel-pattern span12-mobile hide-tablet hide-desktop">
                            <div class="case-single__meta-scorecard__stats hide-mobile">
                                <h3 class="case-single__meta-scorecard__title"></h3></div>
                            <div class="case-single__meta-scorecard__points">
                                <h3 class="case-single__meta-scorecard__title">@lang('web.hits'):</h3><span class="case-single__meta-scorecard__number">{{$detail->hits or ''}}</span></div>
                            <div class="case-single__meta-scorecard__days">
                                <h3 class="case-single__meta-scorecard__title">@lang('web.likes'):</h3><span class="case-single__meta-scorecard__number">{{$detail->likes or ''}}</span></div>
                        </div>
                        <!--在屏幕小的时候显示的作品题目-->
                        <div class="case-single__details--small span8 hide-desktop span14-mobile">
                            <div class="case-single__details--small__content"><span class="case-single__details__type">{{$detail->theme->name or ''}}</span>
                                <h1 class="case-single__details__title span5 span100p-mobile">{{$detail->name}}</h1></div>
                        </div>
                        <div class="case-single__meta-scorecard span5 span8-tablet pixel-pattern hide-mobile">
                            <div class="case-single__meta-scorecard__stats hide-mobile">
                                <h3 class="case-single__meta-scorecard__title"></h3></div>
                            <div class="case-single__meta-scorecard__points">
                                <h3 class="case-single__meta-scorecard__title">@lang('web.hits'):</h3><span class="case-single__meta-scorecard__number">{{$detail->hits}}</span></div>
                            <div class="case-single__meta-scorecard__days">
                                <h3 class="case-single__meta-scorecard__title">@lang('web.likes'):</h3><span class="case-single__meta-scorecard__number">{{$detail->likes}}</span></div>
                        </div>
                        <!--小屏幕部分结束-->
                        <!--作品详细描述部分-->
                        <section class="span14 case-single__description">


                            <div class="case-single__description__buttons span14-mobile">
                                @if($detail->like==null)
                                    <a href="javascript:void(0)" onclick="like({{$detail->id}})" id="like{{$detail->id}}" class="case-single__description__button button">
                                        @lang('web.likes')
                                    </a>

                                    <a href="javascript:void(0)" style="display: none" onclick="no_like({{$detail->id}})" id="no_like{{$detail->id}}" class="case-single__description__button button">
                                        @lang('web.no_likes')
                                    </a>
                                @else
                                    <a href="javascript:void(0)" style="display: none" onclick="like({{$detail->id}})" id="like{{$detail->id}}" class="case-single__description__button button">
                                        @lang('web.likes')
                                    </a>

                                    <a href="javascript:void(0)" onclick="no_like({{$detail->id}})" id="no_like{{$detail->id}}" class="case-single__description__button button">
                                        @lang('web.no_likes')
                                    </a>
                                @endif
                                @if(\Illuminate\Support\Facades\Auth::check())
                              @if( \Illuminate\Support\Facades\Auth::user()->can('writing_del') || \Illuminate\Support\Facades\Auth::user()->can('writing_del1',$detail))
                                <a href="{{route('writing_del',['writing_id'=>$detail->id])}}"  class="case-single__description__button  button--dark button">@lang('web.writing_del')</a>
                                @endcan
@endif
                                  @if(\Illuminate\Support\Facades\Auth::check())
                                      @if( \Illuminate\Support\Facades\Auth::user()->can('writing_del') || \Illuminate\Support\Facades\Auth::user()->can('writing_del1',$detail))
                                          <a href="{{route('writing_edit',['writing_id'=>$detail->id])}}"  class="case-single__description__button  button--dark button">@lang('web.writing_edit')</a>
                                          @endcan
                                      @endif
                            </div>
                            <div class="case-single__description__content span10 span14-mobile">
                                <h2 class="case-single__description__title">@lang('web.writing_desc'):</h2>
                                <p class="case-single__description__text">{{$detail->desc}}</p>
                            </div>
                        </section>
                        <!--积分部分-->
                  {{--      <section class="span9 case-single__credits span14-mobile">
                            <h2 class="case-single__credits__title">Credits:</h2>
                            <p class="case-single__credits__profiles"><span class="case-credit"><span class="case-credit__name case-credit__name--nolink"><!-- react-text: 513 -->Sadie Clayton<!-- /react-text --><span class="case-credit__count"><!-- react-text: 515 --> <!-- /react-text --><!-- react-text: 516 -->(1 FWA)<!-- /react-text --></span></span><span> and </span>
											<a class="case-credit__name" href="/profiles/makemepulse">
												<!-- react-text: 1413 -->makemepulse
                                                <!-- /react-text --><span class="case-credit__count"><!-- react-text: 1415 --> <!-- /react-text --><!-- react-text: 1416 -->(35 FWAs)<!-- /react-text --></span></a>
											</span>
                            </p>
                        </section>--}}
                        <!--图片部分-->
                        <div class="span14 three-images" >
                            @if($detail->video_url)
                                <iframe width="560" height="568"  src="{{$detail->video_url}}" frameborder="0" allowfullscreen></iframe>
                                @elseif($detail->video)
                                <video id="my-video" class="video-js" controls preload="none"   height="600"
                                       data-setup="{}">
                                    <source src="{{asset('storage/'.$detail->video)}}" type="video/mp4">
                                </video>
                                @endif

                            </div>
                        </div>
                        <!--间隔部分-->
                        <div class="case-single__spacer span7-mobile pixel-pattern span5"></div>
                        <div class="cf"></div>
                        <div class="case-single__spacer span7-mobile pixel-pattern span5"></div>
                        <!--作者介绍-->
                        {{--<section class="related-interviews span14">
                            <div class="related-interviews__top">
                                <h2 class="related-interviews__title">Related Interviews</h2></div>
                            <ul class="related-interviews__interview-holder">
                                <li class="related-interviews__interview"><img src="https://thefwa.com/dyn/resources/Editorial_Model_Editorial/image/3/2303/1460547287/1364_span14/img_8351_1364x620_72nb.jpg" alt="" class="related-interviews__interview__image span5 hide-mobile">
                                    <div class="related-interviews__interview__date span2 pixel-pattern hide-tablet hide-mobile">
                                        <div class="pixel-text related-interviews__interview__day"><span class="pixel-text__text">13</span></div><span class="related-interviews__interview__month"><!-- react-text: 1452 -->June<!-- /react-text --><!-- react-text: 1453 --> <!-- /react-text --><!-- react-text: 1454 -->2016<!-- /react-text --></span><span class="related-interviews__interview__award">Interview —</span></div>
                                    <div class="related-interviews__interview__right span7 span9-tablet span14-mobile">
                                        <h4 class="related-interviews__interview__byline"><!-- react-text: 1458 -->By <!-- /react-text --><!-- react-text: 1459 -->Rob Ford<!-- /react-text --></h4>
                                        <h4 class="related-interviews__interview__small-date hide-desktop">13 June, 2016</h4>
                                        <div class="related-interviews__interview__content">
                                            <h3 class="related-interviews__interview__title">Nicolas Rajabaly and Antoine Ughetto - MAKE ME PULSE</h3>
                                            <p class="related-interviews__interview__text">10 years in internet age is almost like a century ! With the arrival of VR, and the various sensors (Leap, Myo, etc.) I really hope we will arrive to more and more sophisticated and immersive experiences. </p>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </section>--}}
                        <!--间隔部分-->
                        <div class="case-single__spacer span7-mobile pixel-pattern span5"></div>
                        <div class="cf"></div>
                        <!--评论部分-->
                        <section class="comments span14" id="app">
                            <div class="comments__top span14">
                                <h2 class="comments__title">@lang('web.writing_discuss')</h2></div>
                            <!--评论填写处-->
                            <div class="comments__bottom span14" id="app">
                                <form class="comments__reply span5 span14-mobile" method="post" action="#" novalidate="" id="id1">
                                    <!--未登录时先提示-->
                                {{--    <div class="form-errors">
                                        <div class="push0 span100p">
                                            <ol>
                                                <li><strong></strong>
                                                    <!-- react-text: 3345 -->
                                                    <!-- /react-text -->
                                                    <!-- react-text: 3346 -->Login is required
                                                    <!-- /react-text -->
                                                </li>
                                            </ol>
                                        </div>
                                    </div>--}}
                                    <!--评论填写-->
                                    <label class="custom-label relative"><textarea id="comment" name="comment"  v-bind:placeholder="placeholder" rows="5" class="custom-input__textarea comments__message span8-tablet span100p-mobile" v-model="content" id="content"></textarea></label>
                                  <button type="button" value="Post Comment" class="form-submit comments__send" name="Post Comment" v-on:click="post_comment" ><!-- react-text: 794 -->@lang('web.post_comment')<!-- /react-text --><svg class="svg-spinner form-submit__spinner svg-spinner--inactive" width="16px" height="16px" viewBox="0 0 66 66"><circle class="svg-spinner__path-bg" stroke="transparent" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle><circle class="svg-spinner__path" stroke="#dbdbdb" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle></svg></button>
                                 @if(! \Illuminate\Support\Facades\Auth::check())   <a href="{{route('login')}}" class="button comments__login">@lang('web.login')</a>@endif
                                </form>
                                <!--已评论的列表-->
                                <div class="comments__comments span9 span14-mobile"><span class="comments__count">(@{{ comment.length }}) @lang('web.comment_count') </span>
                                    <ul class="comments__comments-holder">

                                        <li class="comments__comment span9 span14-mobile" v-for="(item,index) in comment">
                                            <div class="span2 span3-tablet comments__comment__left span14-mobile">
                                                <h3 class="comments__comment__name"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;" v-text="item.user.name" ></font></font></h3>
                                                <h4 class="comments__comment__date"><!-- react-text: 13154 --><font style="vertical-align: inherit;" v-text="item.created_at"></font><!-- /react-text --></h4></div>
                                            <div class="comments__comment__content span7 span14-mobile">
                                                <p class="comments__comment__text span4 span12-mobile">
                                                    <font style="vertical-align: inherit;">
                                                        <font style="vertical-align: inherit;" v-html="contentText(item)"></font>
                                                    </font>
                                                </p>
                                            </div>
                                                                        <h3 v-on:click="replayone(item)">@lang('web.replay')</h3>
                                                                @can('comment_display') <h3 v-on:click="display_comment(item,index)">@lang('web.display_comment')</h3>@endcan
                                        </li>
                                    </ul>
                                    <span href="#" class="comments__more span9 pixel-pattern span14-mobile"></span>
                                </div>
                            </div>
                        </section>
                        <!--间隔部分-->
                        <div class="case-single__spacer span7-mobile case-single__spacer span7-mobile--border pixel-pattern span5"></div>
                        <!--作者其他的作品-->
                        <div>
                            <section class="related-cases span14" id="related-cases">
                                <div class="related-cases__fill span2 hide-mobile"></div>
                                <div class="related-cases__top span12 span14-mobile">
                                    <h2 class="related-cases__title"><!-- react-text: 1471 -->@lang('web.more_writings')<!-- /react-text -->
                                        <ul class="related-cases__case-holder span12 span14-mobile" id="load_more1">
                                </ul>
                            </section>
                            <a href="javascript:void(0)" onclick="load_more1()" class="related-cases__load-more span8 span100p-mobile pixel-pattern"><span class="span2 span4-mobile related-cases__load-more__arrow-holder"><span class="related-cases__load-more__arrow"></span></span>
                                <!-- react-text: 7373 -->
                                <font style="vertical-align: inherit;">
                                    <font style="vertical-align: inherit;" id="load1">@lang('web.load_more')</font>
                                </font>
                                <!-- /react-text -->
                            </a>
                        </div>
                        <div class="cf"></div>
                    </div>

                </article>
            </div>

        <script type="text/javascript">
            var myPlayer = videojs('my-video');
            videojs("my-video").ready(function(){
                var myPlayer = this;
               // myPlayer.play();
            });
        </script>
        <script src="{{asset('js/vue.js')}}"></script>
        <script >
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            var jacke = humane.create({baseCls: 'humane-jackedup', addnCls: 'humane-jackedup-success'})
            var error = humane.create({baseCls: 'humane-jackedup', addnCls: 'humane-jackedup-error'})

            var app = new Vue({
                el: '#app',
                data: {
                    content: '',
                    comment:[],
                    placeholder:'@lang('web.write_discuss')',
                    replay_user_id:null,
                },
                methods:{
                    post_comment:function(event){//提交一条评论
                        $.post("{{route('post_comment')}}",{replay_user_id:app.replay_user_id,writing_id:{{$detail->id}},content:app.content},function(data){
                            if(data.status=='success'){//成功
                                    app.comment.unshift(data.message);
                                    //状态情0哦
                                    app.placeholder='@lang('web.write_discuss')';
                                    app.content='';
                                    app.replay_user_id=null,
                                    jacke.log('@lang('web.comment_success')');
                            }else{
                                error.log(data.message);
                            }
                        }).error(function(res){

                            error.log(res.responseJSON.errors.content);
                        })

                    },
                    //屏蔽评论
                    display_comment:function(item,index){//屏蔽
                        $.post("{{route('display_comment')}}",{id:item.id},function(data){
                            if(data.status=='success'){//屏蔽成功
                                    app.comment.splice(index,1);
                                    jacke.log('@lang('web.displayed')');
                            }else{
                                error.log(data.message);
                            }
                        }).error(function(res){

                            error.log(res.responseJSON.errors.content);
                        })

                    },
                    replayone:function(item){
                        app.placeholder="@"+item.user.name;
                        app.replay_user_id=item.user.id;
                    },
                    contentText:function(item){//渲染content
                        if(item.replay_user_id!=null){
                            return '<a href="">@'+item.replay_user.name+'</a> '+item.content;
                        }else{
                            return item.content;
                        }
                    }
                },
                computed:{

                }
            });
            $.post("{{route('post_index')}}",{id:{{$detail->id}}},function(data){
                if(data.status=='success'){//成功
                    app.comment=data.message;
                    console.log(app.comment);
                }else{

                }
            })
        </script>
        <script type="text/javascript" src="{{asset('manger/plugins/layui2.0/layui.js')}}"></script>
        <script>
        var page=1;
        var id={{$detail->author_id or ''}};
         function load_more1(){
             $.get('{{route('get_more_writing')}}',{page:page,id:id},function(data){
                 if(data){
                     page++;
                     $("#load_more1").html($("#load_more1").html()+data);
                 }else{
                     $("#load1").html('@lang('web.no_more')');
                 }
             });
         }
load_more1();
        </script>
    @endsection